<script setup lang="ts">
/**
 * @name RecalculationCalculationIndicators
 * @description 计算指标重算
 */
import { Notification } from '@element-plus/icons-vue'
import type { ComponentExposed } from 'vue-component-type-helpers'
import BatchRecalculationModal from './components/BatchRecalculationModal.vue'
import RecalculationModal from './components/RecalculationModal.vue'
import SearchForm from './components/SearchForm.vue'
import { defaultPagingParams } from './index'
import type { IndicatorInfo, TableColumn } from '@/types'
import { calculationIndicatorRecalculationApi } from '@/api'
// ------------------use------------------
// #region
const { $message } = useCurrentInstance()
const { withLoading, loading } = useDefineLoading()
const [tableData, setTableData] = useState<IndicatorInfo[]>(
  [],
)
const [total, setTotal] = useState<number>(0)
const [selectionList, setSelectionList] = useState<any[]>(
  [],
)
const [selectData, setSelectData] = useState<any | null>(
  null,
)
// #endregion
// ------------------静态变量------------------
// #region
const columns: TableColumn<IndicatorInfo>[] = [
  {
    key: uuid(),
    type: 'selection',
    width: '80',
  },
  {
    key: uuid(),
    type: 'index',
    width: '80',
    label: '序号',
  },
  {
    key: uuid(),
    label: '指标名称',
    prop: 'indicatorName',
  },
  {
    key: uuid(),
    label: '指标编码',
    prop: 'indicatorNumber',
  },
  {
    key: uuid(),
    label: '计量单位',
    prop: 'unit',
  },
]
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const modalRef
  = ref<ComponentExposed<typeof RecalculationModal>>()
const batchModalRef
  = ref<ComponentExposed<typeof BatchRecalculationModal>>()

const pagingParams = ref({
  ...defaultPagingParams,
})
// #endregion
// ------------------reactive------
// #region

// #endregion
// ------------------computed------
// #region
// #endregion
// ------------------生命周期------------------
// #region
// #endregion
// ------------------内置方法---------------------
// #region

// #endregion
// ------------------方法---------------------
// #region
async function getTableData() {
  const { data: res } = await withLoading(
    calculationIndicatorRecalculationApi.selectCalculationIndicatorPage,
  )(pagingParams.value)
  const { total, records } = res

  setTotal(total)
  setTableData(records)
}
function handleClickNode(row: any) {
  pagingParams.value.pointId = row.id
  getTableData()
}
function handleRecalculation(row: any) {
  setSelectData(row)
  modalRef.value?.open()
}
function handleBatchRecalculation() {
  const s = unref(selectionList)
  if (s.length === 0) {
    $message.warning('请先选择需要重新计算的行')
    return
  }
  batchModalRef.value?.open()
}
// #endregion
</script>

<template>
  <div class="padding-sm flex container">
    <ReadonlyPointTree
      fire
      class="flex-incompressible"
      @click-node="handleClickNode"
    />
    <div
      class="flex-direction margin-left-sm flex-fillRemaining overflow flex align-end"
    >
      <view-table
        :loading="loading"
        :columns="columns"
        :data="tableData"
        @selection-change="setSelectionList"
      >
        <template #actions>
          <SearchForm
            v-model="pagingParams"
            @search="getTableData"
            @reset="getTableData"
            @batch="handleBatchRecalculation"
          />
        </template>
        <template #operate="{ row }">
          <TdButton
            title="发起重算"
            :icon="Notification"
            type="primary"
            @click="handleRecalculation(row)"
          />
        </template>
      </view-table>

      <!-- 分页 -->
      <ListsPagination
        v-model:page-num="pagingParams.pageNumber"
        v-model:page-size="pagingParams.pageSize"
        :total="total"
        @current-change="getTableData"
        @size-change="getTableData"
      />
    </div>

    <RecalculationModal ref="modalRef" :select-data />
    <BatchRecalculationModal
      ref="batchModalRef"
      :time-type="pagingParams.key"
      :selection-list="selectionList"
    />
  </div>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
